﻿@model Guid
@{
    var PId = ViewData["PId"].ToGuid();
}
@section Styles{
    <style type="text/css">
        html, body {
            background: #ffffff;
        }
    </style>
}
@section Scripts{
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    form: {
                        saveState: false,
                        pId:'@PId',
                        vm: {
                            Id: '@Model',
                            Model: {},
                            AllFunctionList: [],
                            FunctionIds: []
                        }
                    }
                }
            },
            created: function () {
                this.loadForm();
            },
            mounted: function () {

            },
            methods: {
                loadForm: function () {
                    var path = `@Url.Action("LoadForm")/${this.form.vm.Id}`;
                    var _this = this;

                    hzyAdmin.post(path, {}, function (r) {
                        if (r.status != 1) return;
                        _this.form.vm = r.data;
                        //给pid赋值
                        _this.form.vm.Model.Menu_ParentID = _this.form.pId;
                    });
                },
                closeWindow: function (delay = 0) {
                    setTimeout(function () {
                        hzyAdmin.layer.close(hzyAdmin.layer.getFrameIndex(window.name));
                    }, delay);
                },
                save: function () {
                    var path = `@Url.Action("Save")`;
                    var _this = this;

                    //验证
                    if (!this.form.vm.Model.Menu_Name) return hzyAdmin.alert('菜单名不能为空!','警告');

                    this.form.saveState = true;
                    hzyAdmin.post(path, this.form.vm, function (r) {
                        _this.form.saveState = false;
                        if (r.status == 1) {
                            hzyAdmin.alert('保存成功', '成功');
                            //关闭当前窗口
                            _this.closeWindow();
                        }
                    });
                }
            }
        });
    </script>
}
<div class="container-fluid hzyAdminForm" id="app">
    <div class="row">
        <div class="col-sm-6">
            <h4 class="example-title">编号</h4>
            <input type="text" class="form-control" placeholder="请输入 编号" v-model="form.vm.Model.Menu_Num" autocomplete="off" />
        </div>
        <div class="col-sm-6">
            <h4 class="example-title">菜单名称</h4>
            <input type="text" class="form-control" placeholder="请输入 菜单名称" v-model="form.vm.Model.Menu_Name" autocomplete="off" />
        </div>
        <div class="col-sm-6">
            <h4 class="example-title">菜单地址</h4>
            <input type="text" class="form-control" placeholder="请输入 菜单地址" v-model="form.vm.Model.Menu_Url" autocomplete="off" />
        </div>
        <div class="col-sm-6">
            <h4 class="example-title">图标</h4>
            <input type="text" class="form-control" placeholder="请输入 图标" v-model="form.vm.Model.Menu_Icon" autocomplete="off" />
        </div>
        <div class="col-sm-6">
            <h4 class="example-title">是否显示</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="Menu_IsShow1" name="Menu_IsShow" class="custom-control-input" v-model="form.vm.Model.Menu_IsShow" :value="1">
                        <label class="custom-control-label" for="Menu_IsShow1">是</label>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="Menu_IsShow2" name="Menu_IsShow" class="custom-control-input" v-model="form.vm.Model.Menu_IsShow" :value="2">
                        <label class="custom-control-label" for="Menu_IsShow2">否</label>
                    </div>
                </div>
            </div>
        </div>
        <div class='col-sm-12'>
            <h4 class="example-title">拥有功能</h4>
            <div class="row">
                <div class="col-sm-3" v-for="(item,index) in form.vm.AllFunctionList" :key="index">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" :id="item.Function_ID" :value="item.Function_ID" v-model="form.vm.FunctionIds">
                        <label class="custom-control-label" :for="item.Function_ID">{{item.Function_Name}}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hzyAdminForm-footer">
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6 text-right">
                <button class="btn btn-primary" @@click="save" v-bind:disabled="form.saveState">保存</button>
                <button class="btn btn-danger" @@click="closeWindow()">关闭</button>
            </div>
        </div>
    </div>
</div>